<template>
  <div class="data-management-test">
    <div class="page-header">
      <h1>📊 数据管理测试</h1>
      <p>数据导入导出、数据清洗、数据统计分析测试工具</p>
    </div>

    <div class="management-sections">
      <a-row :gutter="24">
        <a-col :span="8">
          <a-card title="📥 数据导入测试" class="test-card">
            <div class="test-content">
              <a-upload
                :before-upload="beforeUpload"
                :file-list="fileList"
                accept=".csv,.xlsx,.json"
              >
                <a-button>
                  <template #icon>
                    <upload-outlined />
                  </template>
                  选择测试文件
                </a-button>
              </a-upload>
              <div class="import-options">
                <a-select v-model:value="importType" placeholder="选择导入类型" style="width: 100%; margin-top: 12px;">
                  <a-select-option value="merchants">商户数据</a-select-option>
                  <a-select-option value="transactions">交易数据</a-select-option>
                  <a-select-option value="channels">渠道数据</a-select-option>
                </a-select>
                <a-button type="primary" @click="testImport" :loading="importLoading" style="width: 100%; margin-top: 12px;">
                  开始导入测试
                </a-button>
              </div>
            </div>
          </a-card>
        </a-col>

        <a-col :span="8">
          <a-card title="📤 数据导出测试" class="test-card">
            <div class="test-content">
              <a-form layout="vertical">
                <a-form-item label="导出类型">
                  <a-select v-model:value="exportType">
                    <a-select-option value="payment_report">支付报表</a-select-option>
                    <a-select-option value="merchant_report">商户报表</a-select-option>
                    <a-select-option value="channel_report">渠道报表</a-select-option>
                  </a-select>
                </a-form-item>
                <a-form-item label="导出格式">
                  <a-select v-model:value="exportFormat">
                    <a-select-option value="csv">CSV</a-select-option>
                    <a-select-option value="xlsx">Excel</a-select-option>
                    <a-select-option value="json">JSON</a-select-option>
                  </a-select>
                </a-form-item>
                <a-form-item>
                  <a-button type="primary" @click="testExport" :loading="exportLoading">
                    测试导出
                  </a-button>
                </a-form-item>
              </a-form>
            </div>
          </a-card>
        </a-col>

        <a-col :span="8">
          <a-card title="🔍 数据统计测试" class="test-card">
            <div class="test-content">
              <a-form layout="vertical">
                <a-form-item label="统计维度">
                  <a-select v-model:value="statsDimension">
                    <a-select-option value="daily">按日统计</a-select-option>
                    <a-select-option value="weekly">按周统计</a-select-option>
                    <a-select-option value="monthly">按月统计</a-select-option>
                  </a-select>
                </a-form-item>
                <a-form-item label="统计指标">
                  <a-checkbox-group v-model:value="statsMetrics">
                    <a-checkbox value="transaction_count">交易笔数</a-checkbox>
                    <a-checkbox value="transaction_amount">交易金额</a-checkbox>
                    <a-checkbox value="success_rate">成功率</a-checkbox>
                  </a-checkbox-group>
                </a-form-item>
                <a-form-item>
                  <a-button type="primary" @click="testStats" :loading="statsLoading">
                    生成统计
                  </a-button>
                </a-form-item>
              </a-form>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>

    <!-- 测试结果展示 -->
    <div class="test-results" v-if="testResults.length > 0">
      <h3>📋 测试结果</h3>
      <a-timeline>
        <a-timeline-item v-for="result in testResults" :key="result.id" :color="result.status === 'success' ? 'green' : 'red'">
          <div class="result-item">
            <div class="result-header">
              <span class="result-type">{{ result.type }}</span>
              <span class="result-time">{{ result.timestamp }}</span>
            </div>
            <div class="result-content">{{ result.message }}</div>
            <div class="result-details" v-if="result.details">
              <a-tag v-for="detail in result.details" :key="detail.key" color="blue">
                {{ detail.key }}: {{ detail.value }}
              </a-tag>
            </div>
          </div>
        </a-timeline-item>
      </a-timeline>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { message } from 'ant-design-vue'
import { UploadOutlined } from '@ant-design/icons-vue'

const fileList = ref<any[]>([])
const importType = ref('merchants')
const exportType = ref('payment_report')
const exportFormat = ref('csv')
const statsDimension = ref('daily')
const statsMetrics = ref(['transaction_count', 'transaction_amount'])

const importLoading = ref(false)
const exportLoading = ref(false)
const statsLoading = ref(false)

const testResults = ref<any[]>([])

const beforeUpload = (file: any) => {
  const isValidType = ['text/csv', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/json'].includes(file.type)
  if (!isValidType) {
    message.error('只支持CSV、Excel和JSON文件格式')
    return false
  }

  const isValidSize = file.size / 1024 / 1024 < 10
  if (!isValidSize) {
    message.error('文件大小不能超过10MB')
    return false
  }

  return false // 阻止自动上传
}

const testImport = async () => {
  importLoading.value = true
  try {
    // 模拟数据导入
    await new Promise(resolve => setTimeout(resolve, 1500))

    const result = {
      id: Date.now(),
      type: '数据导入测试',
      status: 'success',
      timestamp: new Date().toLocaleString(),
      message: `${importType.value} 数据导入测试完成`,
      details: [
        { key: '导入类型', value: importType.value },
        { key: '处理记录数', value: Math.floor(Math.random() * 1000) + 100 },
        { key: '成功记录数', value: Math.floor(Math.random() * 900) + 100 }
      ]
    }

    testResults.value.unshift(result)
    message.success('数据导入测试完成')
  } catch (error) {
    message.error('数据导入测试失败')
  } finally {
    importLoading.value = false
  }
}

const testExport = async () => {
  exportLoading.value = true
  try {
    // 模拟数据导出
    await new Promise(resolve => setTimeout(resolve, 1200))

    const result = {
      id: Date.now(),
      type: '数据导出测试',
      status: 'success',
      timestamp: new Date().toLocaleString(),
      message: `${exportType.value} 数据导出测试完成`,
      details: [
        { key: '导出类型', value: exportType.value },
        { key: '导出格式', value: exportFormat.value },
        { key: '导出记录数', value: Math.floor(Math.random() * 5000) + 1000 },
        { key: '文件大小', value: `${(Math.random() * 5 + 1).toFixed(2)}MB` }
      ]
    }

    testResults.value.unshift(result)
    message.success('数据导出测试完成')
  } catch (error) {
    message.error('数据导出测试失败')
  } finally {
    exportLoading.value = false
  }
}

const testStats = async () => {
  statsLoading.value = true
  try {
    // 模拟统计分析
    await new Promise(resolve => setTimeout(resolve, 1800))

    const result = {
      id: Date.now(),
      type: '数据统计测试',
      status: 'success',
      timestamp: new Date().toLocaleString(),
      message: `${statsDimension.value} 统计分析测试完成`,
      details: [
        { key: '统计维度', value: statsDimension.value },
        { key: '统计指标', value: statsMetrics.value.join(', ') },
        { key: '数据范围', value: `最近${Math.floor(Math.random() * 30) + 1}天` },
        { key: '统计耗时', value: `${(Math.random() * 2 + 0.5).toFixed(2)}秒` }
      ]
    }

    testResults.value.unshift(result)
    message.success('数据统计测试完成')
  } catch (error) {
    message.error('数据统计测试失败')
  } finally {
    statsLoading.value = false
  }
}
</script>

<style scoped>
.data-management-test {
  padding: 20px;
}

.page-header {
  margin-bottom: 24px;
  text-align: center;
}

.page-header h1 {
  font-size: 24px;
  color: #333;
  margin: 0;
}

.page-header p {
  color: #666;
  margin: 8px 0 0 0;
}

.management-sections {
  margin-bottom: 24px;
}

.test-card {
  height: 100%;
}

.test-content {
  min-height: 200px;
}

.import-options {
  margin-top: 16px;
}

.test-results {
  background: white;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.test-results h3 {
  margin-top: 0;
  color: #333;
}

.result-item {
  padding: 8px 0;
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.result-type {
  font-weight: bold;
  color: #333;
}

.result-time {
  color: #666;
  font-size: 12px;
}

.result-content {
  margin-bottom: 8px;
  color: #666;
}

.result-details {
  margin-top: 8px;
}

.result-details .ant-tag {
  margin-bottom: 4px;
}
</style>